<template>
  <div>
    <el-input
      style="width: 170px; float: left; margin-left: 16px"
      size="small"
      placeholder="请输入姓名"
      v-model="name"
    />
    <el-input
      style="width: 170px; float: left; margin-left: 16px"
      size="small"
      placeholder="请输入期望职位"
      v-model="position"
    />
    <el-input
      style="width: 170px; float: left; margin-left: 16px"
      size="small"
      placeholder="请输入邮箱"
      v-model="email"
    />
    <el-input
      style="width: 170px; float: left; margin-left: 16px"
      size="small"
      placeholder="请输入联系电话"
      v-model="mobile"
    />
    <el-input
      style="width: 170px; float: left; margin-left: 16px"
      size="small"
      placeholder="请输入现居住地"
      v-model="address"
    />
    <el-input
      style="width: 170px; float: left; margin-left: 16px"
      size="small"
      placeholder="请输入学号"
      v-model="sid"
    />
    <el-select
      v-model="gender"
      style="width: 170px; float: left; margin-left: 16px"
      size="small"
      clearable
      placeholder="请选择性别"
    >
      <el-option
        v-for="item in options"
        :key="item"
        :label="item"
        :value="item"
      >
      </el-option>
    </el-select>
    <el-date-picker
      style="width: 170px; float: left; margin-left: 16px; margin-top: 10px"
      size="small"
      v-model="birthday"
      value-format="yyyy-MM-dd"
      type="date"
      placeholder="选择生日"
    >
    </el-date-picker>
    <el-select
      v-model="nid"
      style="width: 170px; float: left; margin-left: 16px; margin-top: 10px"
      size="small"
      filterable
      clearable
      placeholder="请选择民族"
    >
      <el-option
        v-for="item in nation"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <el-select
      v-model="pid"
      style="width: 170px; float: left; margin-left: 16px; margin-top: 10px"
      size="small"
      filterable
      clearable
      placeholder="请选择政治面貌"
    >
      <el-option
        v-for="item in pFace"
        :key="item.id"
        :label="item.politicalFace"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <treeselect
      v-model="major"
      style="width: 170px; float: left; margin-left: 16px; margin-top: 10px"
      :options="college"
      :normalizer="normalizer"
      placeholder="请选择选择专业"
    />
    <el-button
      type="primary"
      icon="el-icon-search"
      style="float: left; margin-left: 16px; margin-top: 10px"
      size="small"
      @click="initResume"
      >搜索</el-button
    >
    <el-button
      style="float: left; margin-left: 16px; margin-top: 10px"
      icon="el-icon-refresh"
      size="small"
      @click="clearInput"
      >重置</el-button
    >
    <!--     <el-button
      style="float: left; margin-top: 10px; margin-left: 16px"
      type="danger"
      plain
      icon="el-icon-delete"
      size="small"
      @click="delAll"
      :disabled="this.multipleSelection.length == 0"
      >批量删除</el-button
    > -->
    <el-upload
      style="float: left; margin-top: 10px; margin-left: 16px"
      action="/resume/"
      :headers="headers"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <el-button type="info" plain size="small" icon="el-icon-download"
        >导入</el-button
      >
    </el-upload>
    <el-button
      type="warning"
      plain
      size="small"
      icon="el-icon-upload2"
      style="
        float: left;
        margin-left: 15px;
        margin-top: 10px;
        margin-bottom: 10px;
      "
      @click="exportResumeInfo"
      >导出</el-button
    >
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      :cell-style="rowClass"
      :header-cell-style="headClass"
    >
      <el-table-column prop="sid" label="学号" width="100"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
      <el-table-column prop="gender" label="性别" width="50"> </el-table-column>
      <el-table-column prop="birthday" label="生日" width="100">
      </el-table-column>
      <el-table-column prop="nation.name" label="民族" width="70">
      </el-table-column>
      <el-table-column prop="height" label="身高" width="50"> </el-table-column>
      <el-table-column prop="weight" label="体重" width="50"> </el-table-column>
      <el-table-column
        prop="politicalFace.politicalFace"
        label="政治面貌"
        width="100"
      >
      </el-table-column>
      <el-table-column prop="major" label="专业" width="100"> </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="position"
        label="期望职位"
        width="100"
      >
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="address"
        label="现居住地址"
        width="100"
      >
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="email"
        label="邮箱"
        width="100"
      >
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="mobile"
        label="电话"
        width="100"
      >
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="award"
        label="所获奖项"
        width="100"
      >
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="selfEvaluation"
        label="自我评价"
        width="100"
      >
      </el-table-column>
      <!--       <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>
    <div style="margin-top: 10px; float: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="currentPage"
        :page-sizes="[5, 8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  components: { Treeselect },
  data() {
    return {
      position: "",
      name: "",
      options: ["男", "女"],
      birthday: "",
      gender: "",
      nation: [],
      college: [],
      total: 0,
      currentPage: 1,
      tableData: [],
      pageSize: 5,
      nid: "",
      pid: "",
      major: "",
      pFace: [],
      email: "",
      sid: "",
      mobile: "",
      address: "",
    };
  },
  computed: {
    headers() {
      return { Authorization: sessionStorage.getItem("tokenStr") };
    },
  },
  created() {
    this.initResume();
    this.initCollege();
    this.initNation();
    this.initPoliticalFace();
  },
  methods: {
    normalizer(node) {
      return {
        id: node.name,
        label: node.name,
        children: node.children,
      };
    },
    initResume() {
      this.$get(
        "resume/" +
          this.currentPage +
          "/" +
          this.pageSize +
          "?name=" +
          this.name +
          "&position=" +
          this.position +
          "&email=" +
          this.email +
          "&mobile=" +
          this.mobile +
          "&address=" +
          this.address +
          "&gender=" +
          this.gender +
          "&birthday=" +
          this.birthday +
          "&nid=" +
          this.nid +
          "&pid=" +
          this.pid +
          "&major=" +
          this.major +
          "&sid=" +
          this.sid
      ).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.total = res.data.total;
        }
      });
    },
    /*     handleDelete(row) {
      this.$confirm('此操作将删除"' + row.name + '", 是否继续?', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$put("resume/?ids=" + row.id).then((res) => {
          if (res.code == 200) {
            this.initResume();
          }
        });
      });
    },
    delAll() {}, */
    rowClass() {
      return "text-align: center;";
    },
    headClass() {
      return "text-align: center;background:#f8f8f9;";
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initResume();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.initResume();
    },
    clearInput() {
      location.reload();
    },
    beforeAvatarUpload(file) {
      var testMsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      if (testMsg != "xls" && testMsg != "xlsx") {
        this.$message({
          message: "上传文件只能是xls、xlsx",
          type: "error",
        });
        return false;
      }
      return true;
    },
    handleAvatarSuccess(res) {
      if (res.code == 200) {
        this.$message.success(res.message);
        this.initResume();
      }
    },
    exportResumeInfo() {
      this.$downloadReq("/resume/");
    },
    initCollege() {
      this.$get("college/").then((res) => {
        if (res.code == 200 && res.data) {
          this.college = res.data;
        }
      });
    },
    initNation() {
      this.$get("nation").then((res) => {
        if (res.code == 200 && res.data) {
          this.nation = res.data;
        }
      });
    },
    initPoliticalFace() {
      this.$get("political-face").then((res) => {
        if (res.code == 200 && res.data) {
          this.pFace = res.data;
        }
      });
    },
  },
};
</script>

<style>
</style>